<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  subList: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['filterChange'])
const getfilterFn = () => {
  const params = {
    brandId: null,
    attrs: []
  }
  const brand = props.subList.brands.find(item => item.selected)
  params.brandId = brand ? brand.id : null
  //   console.log(params.brandId)
  // 更新attrs
  props.subList.saleProperties.forEach(item => {
    const groupName = item.name
    const propertyName = item.properties.find(it => it.selected).name
    if (propertyName !== '全部') {
      params.attrs.push({ groupName, propertyName })
    }
    // console.log(groupName, propertyName)
    // console.log(params.attrs)
  })

  return params
}

const selectBrand = (item) => {
//   console.log(item)
  props.subList.brands.forEach(it => { it.selected = false })
  item.selected = true
  //   收集参数。通知父组件重新做查询
  emit('filterChange', getfilterFn())
}

const selectProp = (goods, obj) => {
  obj.properties.forEach(it => {
    it.selected = false
  })

  goods.selected = true
  //   收集参数。通知父组件重新做查询
  emit('filterChange', getfilterFn())
}
</script>
<template>
    <div class="sub-filter">
        <div class="item" >
            <div class="head">品牌：</div>
            <div class="body">
                <!-- <a href="javascript:;">全部</a> -->
                <a href="javascript:;"
                v-for="item in subList.brands"
                :key="item.id"
                @click="selectBrand(item)"
                :class="{active:item.selected}">{{ item.name }}</a>
            </div>
        </div>
        <div class="item" v-for="obj in subList.saleProperties" :key="obj.id">
            <div class="head">{{ obj.name }}:</div>
            <div class="body">
                <!-- <a href="javascript:;">全部</a> -->
                <a href="javascript:;"
                v-for="goods in obj.properties"
                :key="goods.id"
                @click="selectProp(goods,obj)"
                :class="{active:goods.selected}"
                >{{ goods.name }}</a>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
.sub-filter{
    background-color: #fff;
    padding: 25px;
    .item{
        display: flex;
        line-height: 40px;
        .head{
            width: 80px;
            color: #999;

        }
        .body{
            flex: 1;
            a{
                margin-right: 36px;
                transition: all .3s;
                display:inline-block;

                &:hover{
                    color: @xtxColor;
                }
            }
            .active{
                color: @xtxColor;
            }
        }
    }
}
</style>
